<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        .vueApp {
            padding-bottom: 10px;
        }

        .container {
            margin: 15px;
            padding: 0 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }

        .bor {
            height: 1px;
            background: rgb(212, 212, 212);
            transform: translateY(0.5);
        }

        .head {
            height: 103px;
        }

        .head .title {
            line-height: 35px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .head .main {
            height: 44px;
        }

        .head .main .rmb {
            min-width: fit-content;
            font-size: 24px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
            margin-right: 7px;
        }

        .head .main .amount {
            height: 100%;
            line-height: 1;
            font-size: 24px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .head .main .amount::placeholder {
            line-height: 1.25;
            height: 100%;
            font-size: 24px;
            font-weight: 500;
            color: rgba(191, 191, 191, 1);
        }

        .footer {
            height: 50px;
        }

        .footer-left {
            font-size: 13px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .footer-right {
            font-size: 13px;
            font-weight: 400;
            color: rgba(255, 92, 1, 1);
        }

        .row {
            height: 50px;
        }

        .row .title {
            font-size: 15px;
            font-weight: 600;
            color: rgba(25, 25, 25, 1);
        }

        .row .account::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            text-align: right;
        }

        .row .account {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            text-align: right;
        }

        .row .arrow {
            width: 17px;
            height: 16px;
            margin-left: 8px;
        }

        .row-2 {
            height: 75px;
        }

        .row-2 .key {
            line-height: 25px;
            font-size: 15px;
            font-weight: 600;
            color: rgba(25, 25, 25, 1);
        }

        .row-2 .value {
            line-height: 25px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .btn {
            width: 210px;
            height: 46px;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            line-height: 42px;
            background: url("../../image/ui/btn_2.png");
            background-size: 100% 100%;
            text-align: center;
            margin: 45px auto 0 auto;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 22px;
        }

        .btn-blue {
            width: 70px;
            min-width: 70px;
            height: 24px;
            border-radius: 12px;
            border: 1px solid rgba(0, 149, 235, 1);
            font-size: 13px;
            font-weight: 400;
            margin-left: 10px;
            color: rgba(0, 149, 235, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="container">
            <div class="head" data-flex="cross:center">
                <div>
                    <div class="title">
                        提现金额
                    </div>
                    <div class="main" data-flex="cross:center">
                        <div class="rmb">¥</div>
                        <input class="amount" v-model="tradeMoney" type="number" data-flex-box="1"
                            placeholder="请输入提现金额">
                    </div>
                </div>
            </div>
            <div class="bor"></div>
            <div class="footer" data-flex="main:justify cross:center">
                <div class="footer-left">
                    当前余额: ¥{{ balance }}
                </div>
                <div class="footer-right" @click="allCashout()">
                    全部提现
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row" data-flex="cross:center" @click="openPicker()">
                <div class="title">收款账户</div>
                <input class="account" readonly="" data-flex-box="1" :value="accountText" type="text"
                    placeholder="请选择收款账户">
                <div class="arrow">
                    <img src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div class="bor" v-show="accountType == '1' || accountType == '2'"></div>
            <div class="row-2" v-show="accountType == 1" data-flex="cross:center" @click="editAlipay()">
                <div data-flex-box="1">
                    <div class="key">
                        {{ alipay.alipayAccount ? '收款支付宝账户' : '您还未绑定支付宝账号' }}
                    </div>
                    <div class="value">
                        {{ alipay.alipayAccount }}
                    </div>
                </div>
                <div class="btn-blue" data-flex="main:center cross:center">编辑账户</div>
            </div>
            <div class="row-2" v-show="accountType == 2" data-flex="cross:center" @click="editBank()">
                <div data-flex-box="1">
                    <div class="key">
                        {{ bank.bankName ? '收款银行卡账户' : '您还未绑定银行卡账户' }}
                    </div>
                    <div class="value">
                        {{ bank.bankName }} {{ bank.bankNo }}
                    </div>
                </div>
                <div class="btn-blue" data-flex="main:center cross:center">编辑账户</div>
            </div>
        </div>
        <div class="btn" @click="submitFn()">确认提现</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                tradeMoney: '',
                balance: pageParam.money,
                accountText: '',
                accountType: '',
                alipay: {},
                bank: {}
            },
            methods: {
                allCashout: function () {
                    this.tradeMoney = this.balance;
                }
            }
        });
        getPageData();
    }

    function getPageData() {
        var params = {
            'entityName': 'withDrawAccount'
        };
        var url = 'common/findList';
        var callback = function (data) {
            for (var i = 0; i < data.listData.length; i++) {
                var item = data.listData[i];
                if (item.bankNo !== '') {
                    vm.bank = item;
                } else {
                    vm.alipay = item;
                }
            }
        };
        POST(url, params, callback);
    }

    var types = [{ name: '支付宝', id: '1' }, { name: '银行卡', id: '2' }];

    function pickerCallback(name, code) {
        var sel = { name: name, code: code };
        vm.accountText = sel.name;
        vm.accountType = sel.code;
    }

    function openPicker() {
        fnOpenFrame({
            name: 'picker',
            url: '../mine/info_layer.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            pageParam: {
                frameName: api.frameName,
                winName: api.winName,
                listData: types,
                val: null
            }
        })
    }

    function editAlipay() {
        fnOpenPublicWin('支付宝账户', 'teacher/bind_alipay', {
            id: vm.alipay.id,
            winName: api.winName,
            frmName: api.frameName,
            userName: vm.alipay.userName,
            phone: vm.alipay.phone,
            alipayAccount: vm.alipay.alipayAccount
        });
    }

    function editBank() {
        fnOpenPublicWin('编辑银行卡', 'teacher/bind_bank', {
            id: vm.bank.id,
            winName: api.winName,
            frmName: api.frameName,
            cardHolder: vm.bank.cardHolder,
            bankName: vm.bank.bankName,
            bankNo: vm.bank.bankNo,
            openingBank: vm.bank.openingBank
        });
    }

    function submitFn() {
        if(vm.tradeMoney == '') {
            fnToast('请输入提现金额');
            return;
        } else if(vm.tradeMoney <= 0) {
            fnToast('提现金额必须大于0');
            return;
        }
        if (vm.tradeMoney <= vm.balance) {
            var url = 'my/confirmWithdrawalsRecord';
            if (vm.accountType == 1 && vm.alipay.alipayAccount) {
                var accountId = vm.alipay.id;
            } else if(vm.accountType == 2 && vm.bank.bankName && vm.bank.bankNo) {
                var accountId = vm.bank.id;
            } else {
                fnToast('请选择收款账户');
                return;
            }
            var params = {
                'tradeMoney': vm.tradeMoney,
                'accountId': accountId
            };
            var callback = function (data) {
                fnToast('提现成功');
                api.execScript({
                    name: pageParam.winName,
                    frameName: pageParam.frmName,
                    script: 'getPageData();'
                })
                api.closeWin();
                // status 为200时,只返回data
            };
            POST(url, params, callback);
        } else {
            fnToast('提现金额不得大于当前余额');
        }
    }
</script>

</html>